﻿.@using Peninsula.Site.Data.Models;
@model TotalYearModel
@section Scripts{
    <script src="~/js/echart/echarts.min.js"></script>
    @*这里写页面自定义脚本*@
    <script>
        $(function () {
            $('#clearDateKeyWord').click(function () {
                $('#DateKeyWord').val(""); // 清空日期
            });

            $(".form_datetime").datetimepicker({
                format: "yyyy",
                language: 'zh-CN',
                autoclose: true,
                todayBtn: true,
                initialDate: "2017-1-1",
                startView: 4,
                keyboardNavigation: true,
                minView: 4

            });
           
        });
    </script>
}
<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-reorder"></i>数量/收益统计
        </div>
    </div>
    <div class="portlet-body form">
        <form id="Total" class="form-horizontal js-form ">
            <div class="form-body ">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <span style="color:red">*</span>@Html.DisplayNameFor(m => m.DateKeyWord)
                            </label>
                            <div class="col-md-7">
                                <div class="input-group">
                                    @Html.TextBoxFor(m => m.DateKeyWord, new { @class = "form-control form_datetime date", @readonly = true,
                                   @placeholder = "请选择年份"
                               })
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" type="button" id="clearDateKeyWord"><i class="fa fa-times"></i></button>
                                    </span>
                                    <div class="input-group-btn">
                                        <div class="row">
                                            <div class="col-md-offset-4 col-md-8">
                                                @*<button type="submit" class="btn btn-success" onclick="DrawECharts()">统计2</button>*@
                                                <input type="button" id="abc" name="abc"
                                                       class="btn btn-success" onclick="DrawECharts()" value="统计" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @Html.ValidationMessageFor(m => m.DateKeyWord)
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>


        <!-- END FORM -->
    </div>
</div>
@*<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-reorder"></i>总数据
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM -->
        <form class="form-horizontal" id="js-search-form">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">
                              @Html.DisplayNameFor(m=>m.TotalAmount)
                            </label>
                            <div class="col-md-6">
                                @Model.TotalAmount
                                @Html.HiddenFor(m => m.TotalAmount)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">
                                @Html.DisplayNameFor(m => m.TotalPrice)
                            </label>
                            <div class="col-md-6">
                                 @Model.TotalPrice
                                @Html.HiddenFor(m => m.TotalPrice)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- END FORM -->
    </div>
</div>*@
<div class="portlet">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>统计图表
                </div>
            </div>
            <div class="portlet-body">

                <div id="Statistic" style="height:400px"></div>

                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('Statistic'));

                    // 指定图表的配置项和数据

                    var option = {
                        title: {
                            text: '订单/钱款统计',

                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {

                            data: ['订单数量', '订单钱款']
                        },
                        toolbox: {          //左上角功能表
                            show: true,
                            feature: {
                                dataView: { show: true, readOnly: true },
                                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                                restore: { show: true },
                                saveAsImage: { show: true },
                                mark: false
                            }
                        },
                        calculable: true,
                        xAxis: [//横轴
                            {
                                name: ['月份'],
                                type: 'category',
                                data: [],//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                            }
                        ],
                        yAxis: [//竖轴
                            {
                                type: 'value',
                                splitArea: { show: true }
                            }
                        ],
                        series: [//系列（值）
                         //    //{
                         //    //    itemStyle:{
                         //    //        normal: {color:'gray'}//改变颜色
                         //    //    },
                         //    //  name: [],
                         //    //    type: 'bar',
                         //    //    data: [],//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                         //    //    markPoint: {
                         //    //        data: [
                         //    //            { type: 'max', name: '最大值' },
                         //    //            { type: 'min', name: '最小值' }
                         //    //        ]
                         //    //    },
                         //    //    markLine: {
                         //    //        data: [
                         //    //            { type: 'average', name: '平均值' }
                         //    //        ]
                         //    //    }
                         //    //},
                        ]
                    };

                    //使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option)

                    function DrawECharts() {
                        var options = myChart.getOption();
                        myChart.showLoading({
                            text: "加载中。。。。。"
                        });
                        $.ajax({
                            type: "POST",
                            async: false, //同步执行 $("#Total").serialize(),
                            data: { 'dateKeyWord': $('#DateKeyWord').val() },
                            url: "MaintenanceStaffTotal",
                            dataType: "json", //返回数据形式为json
                            success: function (result) {
                                if (result) {
                                    if (result.Messages) {
                                        alert("统计年份不能为空！");
                                        return;
                                    }else
                                    { 
                                    //    将返回的category和series对象赋值给options对象内的category和series
                                    //    因为xAxis是一个数组 这里需要是xAxis[i]的形式
                                        myChart.clear();
                                        options.xAxis[0].data = result.listCatepory;
                                        options.series = result.listSeries;
                                        options.legend.data = result.listLegend;
                                        myChart.hideLoading();
                                        myChart.setOption(options);
                                    }
                                   
                                }
                            },
                            error: function (errorMsg) {
                                alert("加载失败！");
                            }

                        });
                    }

                </script>

            </div>
        </div>
